{include file="Public:header" /}
<div class="page page-current" id="router1">
	<div class="bar bar-nav">
		<h1 class="title">答题</h1>
		<i class="icon icon-left" onclick="window.history.go(-1);"></i>
	</div>
</div>
<div class="page" id='router2'>
	<div class="bar bar-nav">
		<h1 class="title">赛前练习</h1>
		<i class="icon icon-left" onclick="window.location.href='{:U('Answer/answer_index')}'"></i>
	</div>
	<div class="content answer">
		<div class="content-block answer_top" style="text-indent: 0;">
			<!--<p>“七一”即将到来，按照区委区政府的整体部署，宝安区委组织部号召全区党员开展党章党规微信平台在线知识测试。通过本次活动，希望全区全体党员扎实开展“两学一做”学习教育，以争做合格党员的实际行动纪念建党96周年华诞。关于答题测试说明：本次答题测试中一共设置了20道单选，总分100分，每小题5分，</p>-->
			<p>{$explain['explain']}关于答题测试说明：本次测试一共设置了{$answer_count}道单选，不限答题时间。</p>
			<div class="row answer_txt jq_radio">
				<h3 class="text-center" style="text-indent: 0;">第<label id="now_id">1</label>/{$answer_count}题</h3>
				{volist name="answer" id="answer"}
				<div class="div{$i}">
					<div id="answer_{$i}" style="display: none;">
						<dl>
							<dt>{$answer['title']}</dt>
							<dd><label><input type="radio" value="A" class="answer_{$i}"  name="answer_{$i}">A.{$answer['option_a']}</label></dd>
							<dd><label><input type="radio" value="B" class="answer_{$i}" name="answer_{$i}">B.{$answer['option_b']}</label></dd>
							<dd><label><input type="radio" value="C" class="answer_{$i}" name="answer_{$i}">C.{$answer['option_c']}</label></dd>
							<!--<dd><label><input type="radio" name="answer_1">D.以上都不是</label></dd>-->
						</dl>
						<a id="sumbit_{$i}" style="text-indent: 0;margin-top:-15px;" class="button button-fill" onclick="AnswerBtn({$i},'{$answer[exactness]|strtoupper}');">提交</a>
					</div>

				<div id="answer_result_{$i}" class="text-center" style="display: none;">
					<!--<p>你的回答：<font class="red">B  错误</font></p>-->
					<p id="exactness_{$i}">正确答案：<font class="green">{$answer['exactness']|strtoupper}</font></p>

					<a id="end_answer_{$i}" href="#router3" style="text-indent: 0;margin-top:0;margin-left:0;display: inline-block;" class="col-40 button button-fill">结束答题</a>
					<a id="next_answer_{$i}" onclick="next_answer({$i})" style="text-indent: 0;margin-top:0;margin-right:0;display: inline-block;" class="col-40 button button-fill">下一题</a>
				</div>
				</div>
				{/volist}
			</div>
		</div>
</div>
</div>
<div class="page" id='router3'>
	<div class="bar bar-nav">
		<h1 class="title">答题报告</h1>
		<!--<i class="icon icon-left" onclick="window.history.go(-1);"></i>-->
		<i class="icon icon-left" onclick="window.location.href='{:U('Answer/answer_index')}'"></i>
	</div>
	<div class="content">
		<div class="row answer_table2 text-center" style="height: 100%">
			<!--<div class="col-25"><div><a href="turntable.html"><i class="iconfont icon-gifts"></i>我要抽奖</a></div></div>-->
			<div class="col-25"><div></div></div>
			<div class="col-50">
				<ul>
					<li>总　共<span id="total_num"></span>题</li>
					<li>答　对<span id="true_num"></span>题</li>
					<li>答　错<span id="false_num"></span>题</li>
					<!--<li>总　分<span>100</span>分</li>
					<li>得　分<span>50</span>分</li>-->
					<li>正确率<span id="accuracy"></span>%</li>
				</ul>
			</div>
			<!--<div class="col-25"><div></div></div>-->
			<!--<div class="col-25"><div><a><i class="iconfont icon-renshu"></i>我要报名</a></div></div>-->
			<div class="col-100 text-center" style="border: none;">
				<!--<span class="button button-fill">排名</span>-->
				<span onclick="window.location.href='{:U('Answer/answer_index')}'" style="margin-top: -45px;" class="button button-fill">正式答题</span>
				<!--<p>你所在地区为广州天河中心小学</p>-->
			</div>
		</div>

		<!--<div class="buttons-tab mechan-page-tab " style="margin-top:.5rem;">
			<a href="#tab1" class="tab-link active button">所在地区排名</a>
			<a href="#tab2" class="tab-link button">所在学校排名</a>
		</div>-->

		<!--<div class="tabs answer_tabs">
			<div id="tab1" class="tab active">
				<p>我在天河区排名第56位，以下仅显示前10名</p>
				<div class="list-block">
					<ul>
						<li class="item-content">
							<span><img src="__PUBLIC__/Home/img/raw_1499150972.jpeg" ></span>
							<span>范冰冰</span>
							<span>100分</span>
							<span>第1名</span>
						</li>
						<li class="item-content">
							<span><img src="__PUBLIC__/Home/img/raw_1499150972.jpeg" ></span>
							<span>刘德华</span>
							<span>100分</span>
							<span>第2名</span>
						</li>
						<li class="item-content">
							<span><img src="__PUBLIC__/Home/img/raw_1499150972.jpeg" ></span>
							<span>周星驰</span>
							<span>100分</span>
							<span>第3名</span>
						</li>
						<li class="item-content">
							<span><img src="__PUBLIC__/Home/img/raw_1499150972.jpeg" ></span>
							<span>梁朝伟</span>
							<span>100分</span>
							<span>第4名</span>
						</li>
						<li class="item-content">
							<span><img src="__PUBLIC__/Home/img/raw_1499150972.jpeg" ></span>
							<span>张三</span>
							<span>100分</span>
							<span>第5名</span>
						</li>
					</ul>
				</div>
			</div>

			<div id="tab2" class="tab">
				<p>我在东圃小学排名第316位，以下仅显示前10名</p>
				<div class="list-block">
					<ul>
						<li class="item-content">
							<span><img src="__PUBLIC__/Home/img/raw_1499150972.jpeg" ></span>
							<span>范冰冰</span>
							<span>100分</span>
							<span>第1名</span>
						</li>
						<li class="item-content">
							<span><img src="__PUBLIC__/Home/img/raw_1499150972.jpeg" ></span>
							<span>刘德华</span>
							<span>100分</span>
							<span>第2名</span>
						</li>
						<li class="item-content">
							<span><img src="__PUBLIC__/Home/img/raw_1499150972.jpeg" ></span>
							<span>周星驰</span>
							<span>100分</span>
							<span>第3名</span>
						</li>
						<li class="item-content">
							<span><img src="__PUBLIC__/Home/img/raw_1499150972.jpeg" ></span>
							<span>梁朝伟</span>
							<span>100分</span>
							<span>第4名</span>
						</li>
						<li class="item-content">
							<span><img src="__PUBLIC__/Home/img/raw_1499150972.jpeg" ></span>
							<span>张三</span>
							<span>100分</span>
							<span>第5名</span>
						</li>
					</ul>
				</div>
			</div>
		</div>-->

	</div>
</div>
<script type="text/javascript" src="http://g.alicdn.com/sj/lib/jquery/dist/jquery.min.js"></script>
<script type='text/javascript' src='http://g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>

<!--城市选择结束-->
<script type="text/javascript" src="__PUBLIC__/Home/activity/js/huodon.js" ></script>
<script>
    jQuery(document).ready(function(){
        $(".jq_radio label").on("click",function(){
            $(".jq_radio dd").removeClass("active");
            $(this).parent().addClass("active");
        });
    });
</script>
</body>
</html>
<link rel="stylesheet" href="__PUBLIC__/Home/layer_mobile/need/layer.css"/>
<script type="text/javascript" src="__PUBLIC__/Home/layer_mobile/layer.js"></script>
<script>
	//var total_num = {$answer_count};
	var true_num = 0;
	var false_num = 0;
	var total_num = {$answer_count};//总题数

    $(document).ready(function () {
        $("#answer_1").show();
    });

    //提交答案
    function AnswerBtn(id_num,exactness){
       // Zepto.toast('回答错误', 2345, 'success top');
		var id_str = "#answer_result_"+id_num;//结果容器
		var choose = $(".active .answer_"+id_num).val();//选中答案
		if (choose == undefined)
		{
            message('请选择答案后提交');
            return false;
		}
		if(choose == exactness)
		{
		    //答对
            $("#exactness_"+id_num).hide();
			var html = "<p  style='margin-top:-20px;'>你的回答：<font class='green'>"+choose+' '+"正确</font></p>"
			$(id_str).prepend(html);
            true_num++;
		}else
		{
		    //答错
            var html = "<p  style='margin-top:-20px;'>你的回答：<font class='red'>"+choose+' '+"错误</font></p>"
            $(id_str).prepend(html);
            false_num++;
		}

		//报告
		if(false_num == 0)
		{
            var accuracy=100;
        }
		else
		{
		    var total = (true_num + false_num);
		    if(true_num !=0)
		    	var accuracy = ((true_num/total).toFixed(2)*100);
		    else
		        var accuracy = 0;
		}
		var total = (true_num+false_num);
        $("#total_num").text(total);
        $("#accuracy").text(accuracy);
        $("#true_num").text(true_num);
        $("#false_num").text(false_num);
		//alert(true_num)

		//禁用
        $(".jq_radio label").unbind();
		$("#sumbit_"+id_num).css('display','none');

        //是否最后一题
        if((true_num+false_num) < total_num)
            $(id_str).show();
        else
        {
            $(id_str).show();
			$("#next_answer_"+id_num).hide();//隐藏下一题按扭
			$("#end_answer_"+id_num).css('width','165px');
            //message('已经是最后一题了！');
        }

       	//$(id_str).show();
    }


    //下一题
	function next_answer(next_id) {
        //绑回选择事件
        $(".jq_radio label").bind('click',
			function(){
                $(".jq_radio dd").removeClass("active");
                $(this).parent().addClass("active");
		});
        //隐藏上一题
        $(".div"+next_id).css('display','none');
        //显示下一题
        var now_id = ++next_id;
        $("#now_id").html(now_id);
        $("#answer_"+now_id).show();

    }

    //提示
    function message(msg) {
        layer.open({
            content: msg,
            skin: 'msg',
            time: 2 //2秒后自动关闭
        });
    }
</script>